<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
	</head>
	
	<body <%--class="layui-layout-login"--%>>
    <button class="layui-btn" id="toAddBanner">添加轮播图</button>
	<table id="demo" lay-filter="test" ></table>

    <form class="layui-form" id="newBannerForm" style="display: none;"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">轮流图名</label>
            <div class="layui-input-block">
                <input type="text" name="bannerOldName" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>

        <button type="button" class="layui-btn" id="test1">
            <i class="layui-icon">&#xe67c;</i>上传轮播图
        </button>
        <img src="" id="bannerImage" >
        <input type="hidden" name="bannerImageUrl" >


        <div class="layui-form-item">
            <label class="layui-form-label">轮播图状态</label>
            <div class="layui-input-block">
                <input type="radio" name="bannerState" value="0" title="上架">
                <input type="radio" name="bannerState" value="1" title="未上架" checked>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">轮播图描述</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" name="bannerDescription"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submitbanner">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>

<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
		<script>
            layui.use(['table','form','upload','layer'], function(){
                var table = layui.table;
                var form=layui.form;
                var layer=layui.layer;
                var upload=layui.upload;
                var index;
                $("#toAddBanner").click(function () {
                   index=layer.open({
                       title:'添加轮播图',
                       type:1,
                       content:$("#newBannerForm"),
                       area:['400px','400px']
                   });

                   form.on("submit(submitbanner)",function (data) {
                        var data=data.field;
                        $.ajax({
                           url:'${pageContext.request.contextPath}/banner/addBanner',
                           type:"post",
                            data:data,
                            dataType:"text",
                            success:function (d) {
                                if(d=="true"){
                                    layer.msg("添加成功！");
                                    layer.close(index);
                                }else{
                                    layer.msg("添加失败！");
                                }
                            }
                        });
                   });
                });
                //第一个实例
                table.render({
                    elem: '#demo'
                    ,height: 312
                    ,url: '${pageContext.request.contextPath}/banner/allBanner' //数据接口
					,limit:4
					,limits:[4,8]
                    ,page: true //开启分页
                    ,cols: [[ //表头
                        {field: 'bannerId', title: '编号',  sort: true/*, fixed: 'left'*/}
                        ,{field: 'bannerOldName', title: '名称'}
                        ,{field: 'bannerState', title: '状态',  sort: true}
                        ,{field: 'bannerDate', title: '上传时间'}
                        ,{field: 'bannerDescription', title: '轮播图描述'}
                        ,{title: '图片',  sort: true, width:224,height:224,templet:function (data) {
								console.log(data.bannerImageUrl)
								return "<img src='${pageContext.request.contextPath}/img/"+data.bannerImageUrl+"'/>";
                            }
						}
                        ,{title: '操作',toolbar: '#barDemo'}

                    ]]
                });
//上传
                var uploadInst = upload.render({
                    elem: '#test1' //绑定元素
                    ,url: '${pageContext.request.contextPath}/banner/upload' //上传接口
                    ,done: function(res){
                        //上传完毕回调
                        if(res.code==0){
                            $("#bannerImage").prop("src","${pageContext.request.contextPath}/img/"+res.src);
                            $("[name='bannerImageUrl']").val(res.src);
                            layer.msg("上传成功！");
                        }
                    }
                    ,error: function(){
                        //请求异常回调
                        layer.msg('上传失败！');
                    }
                });

                //监听工具条
                table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                    var data = obj.data; //获得当前行数据
                    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                    if(layEvent === 'detail'){ //查看
                        //do somehing
                    } else if(layEvent === 'del'){ //删除
                        layer.confirm('真的删除行么', function(index){
                            $.ajax({
								url:"${pageContext.request.contextPath}/banner/delBanner",
								data:"id="+data.bannerId,
								dataType:"text",
								type:"post",
								success:function (d) {
									if(d=="true"){
									    layer.msg("下架成功！");
                                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                        layer.close(index);
                                    }else{
									    layer.msg("操作失败！");
                                        layer.close(index);
                                    }
                                }
							});


                            //向服务端发送删除指令
                        });
                    } else if(layEvent === 'edit'){ //编辑
                        //do something

                        //同步更新缓存对应的值
                        obj.update({
                            username: '123'
                            ,title: 'xxx'
                        });
                    } else if(layEvent === 'LAYTABLE_TIPS'){
                        layer.alert('Hi，头部工具栏扩展的右侧图标。');
                    }
                });


            });
		</script>

	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

		<!-- 这里同样支持 laytpl 语法，如： -->
		{{#  if(d.auth > 2){ }}
		<a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
		{{#  } }}
	</script>

	<style type="text/css">
		.layui-table-cell{
			text-align:center;
			height: auto;
			white-space: normal;
		}
	</style>
	</body>
</html>
